<template>
  <div class="navBar" @click.stop="handle3">
    <div class="narvBar_img">
      <img src="../assets/bilibil_login.png"  />
    </div>
    <div class="navBar_ipt" @click.stop="handle1">
      <p>
        请输入内容！
        <van-icon name="search" class="navBar_ipt_iocn" />
      </p>
    </div>
    <div class="navBar_user"  @click.stop="handle">
      <img :src="userimg" v-if="userimg !==''"/>
      <img src="../assets/user.jpg" v-else>
      <p>下载app</p>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      userimg:''
    }
  },  
  async mounted(){
      const res = await this.$http.get("/user/" + localStorage.getItem("id"));
      this.userimg = res.data[0].user_img
  },
  methods:{
    handle(){
      // 判断是否又token
      if(localStorage.getItem('token') && this.$route.path != '/userinfo'){
        this.$router.push('userinfo')
      }else if(this.$route.path == '/userinfo'){
        return false;
      }else{
        this.$router.push('login')
      }
    },
    handle1(){
      this.$notify({
        message: "对不起，此功能后台数据有问题，暂时不完成！！！谢谢支持",
        color: "red",
        background: "#ffe1e1"
      })
    },
    handle3(){
       // 判断是否又token
      if(localStorage.getItem('token') && this.$route.path != '/index'){
        this.$router.push('index')
      }else if(this.$route.path == '/index'){
        return false;
      }else{
        this.$router.push('login')
      }
    }
  }
};
</script>

<style lang="less" scoped>
.navBar {
  display: flex;
  height: 12.5vw;
  background-color: #fff;
  .narvBar_img {
    width: 27.778vw;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 17.222vw;
      height: 8.056vw;
    }
  }
  .navBar_ipt {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    p {
      box-sizing: border-box;
      width: 85%;
      height: 8vw;
      background-color: #f4f4f4;
      border-radius: 2.778vw;
      color: rgb(226, 211, 213);
      font-size: 3.889vw;
      padding-left: 5.556vw;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      .navBar_ipt_iocn {
        position: absolute;
        left: 2.778vw;
      }
    }
  }
  .navBar_user {
    width: 30vw;
    height: 12.5vw;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    img {
      height: 6.667vw;
      width: 6.667vw;
      border-radius: 7.083vw;
      background-color: #f4f4f4;
      display: block;
      box-shadow: 0 0 10px #ccc;
    }
    p {
      text-align: center;
      height: 6vw;
      width: 13.889vw;
      font-size: 3vw;
      margin: 0vw 1.5vw;
      line-height: 6vw;
      background-color: rgb(255, 169, 181);
      color: #fff;
      border-radius: 1.389vw;
    }
  }
}
</style>